<!-- 累计消费组件 -->
<template>
  <div class="cumulative-consumption">
    <el-table
      :data="consumptionList"
      stripe
      border
      size="small"
      v-loading="loading"
    >
      <el-table-column prop="shopName" label="店铺名称" align="center" />
      <el-table-column prop="totalAmount" label="累计消费金额" align="center" >
        <template slot-scope="scope">
          ¥{{ scope.row.totalAmount }}
        </template>
      </el-table-column>
      <el-table-column prop="purchaseCount" label="购买次数" align="center" />
      <el-table-column prop="refundAmount" label="累计退款金额" align="center" >
        <template slot-scope="scope">
          ¥{{ scope.row.refundAmount }}
        </template>
      </el-table-column>
      <el-table-column prop="refundCount" label="退款次数" align="center"/>
    </el-table>
  </div>
</template>

<script>
export default {
  name: 'CumulativeConsumption',
  props: {
    cellId: {
      type: [String, Number],
      default: null
    }
  },
  data() {
    return {
      loading: false,
      consumptionList: []
    }
  },
  watch: {
    cellId: {
      handler(newVal) {
        if (newVal) {
          this.getConsumptionList()
        }
      },
      immediate: true
    }
  },
  methods: {
    // 获取累计消费数据
    getConsumptionList() {
      if (!this.cellId) return

      this.loading = true
      // 模拟接口调用
      setTimeout(() => {
        this.consumptionList = [
          {
            shopName: '示例店铺1',
            totalAmount: '1500.00',
            purchaseCount: 5,
            refundAmount: '200.00',
            refundCount: 1
          },
          {
            shopName: '示例店铺2',
            totalAmount: '2800.00',
            purchaseCount: 8,
            refundAmount: '0.00',
            refundCount: 0
          }
        ]
        this.loading = false
      }, 500)

      // TODO: 替换为实际API调用
      // getCumulativeConsumption(this.cellId).then(response => {
      //   this.consumptionList = response.data
      //   this.loading = false
      // }).catch(() => {
      //   this.loading = false
      // })
    }
  }
}
</script>

<style scoped>
.cumulative-consumption {
  padding: 10px;
}
</style>
